<template>
  <div>
    <van-cell-group inset>
  <van-cell >
    <van-row >
    <van-col span="3" >

        <van-image
          round
          width="2rem"
          height="2rem"
          :src="this.UserIcon"
          />     
      </van-col>
      <van-col span="17">
        <div style="">
          <!-- <p>{{this.nameTime}}</p> -->
          <p class="name1">{{this.UserName}}</p>
        </div>
        <div>
          <p>{{this.CommentText}}</p>
          <label class="name2"> {{this.AddTime}} </label>
        </div>
      </van-col>
      <van-col span="4">
        <!-- <van-button round type="info" size="small" @click="liktIt()"  >点赞</van-button> -->
        <van-icon  v-if="!islike" size="2rem" name="http://rul4y8e5f.hn-bkt.clouddn.com/like6.png" @click="likeIt()"></van-icon>
        <van-icon v-if="islike" size="2rem" name="http://rul4y8e5f.hn-bkt.clouddn.com/liek5.png" @click="likeIt()"></van-icon>
        <label class="like1">  {{this.CountLike}}</label>
      </van-col>
    </van-row>
     <!-- <p>{{this.CommentText}}</p> -->

  </van-cell>
</van-cell-group>
  </div>
</template>

<script>

import BlogCommentAPI from '@/api/BlogCommentAPI';


export default {
  name: "BlogCommentPage2List",


data() {
  return {
    pageUrl: '',
    islike: false,
    nameTime:'',
  }
},
methods:{



  likeIt(){
    // this.$toast("点赞成功");
  var result = BlogCommentAPI.likeComment(this.CommentId)
 // 获取返回结果
  result.then((val) => {
   console.log(val);
  if (val.success) {
      console.log("点赞成功！！！");
      this.$toast(val.data);
      // this.$router.go(0)
      this.orNotLike();
     }else {
        console.log(val.errorMsg);
         this.$toast(val.errorMsg);
           }
   });
  },

  orNotLike(){
    var result = BlogCommentAPI.orNotLike(this.CommentId)
 // 获取返回结果
  result.then((val) => {
   console.log(val);
  if (val.success) {
      this.islike=val.data
     }else {
        console.log(val.errorMsg);
         this.$toast(val.errorMsg);
           }
   });
  }


},
created(){
  this.nameTime=this.UserName+"--"+ this.AddTime
  this.orNotLike()
},

mounted(){
  // this.pageUrl = this.MusicUrl
},

  props: {
        // commentId
    // 为啥在这里要封装一个 id 属性呢？
    // 原因:将来,子组件中商品的勾选状态变化之后, 需要通过子 -> 父的形式,
    // 通知父组件根据 id 修改对应商品的勾选状态。
    CommentId: {
      required: true,
      type: String
    },
    UserId: {
      required: true,
      type: String
    },
    UserName: {
      required: true,
      type: String
    },
    UserIcon: {
      required: true,
      type: String
    },
    BlogId: {
      required: true,
      type: String
    },
    CommentText: {
      required: true,
      type: String
    },
    CountLike: {
      required: true,
      type: Number
    },
    AddTime: {
      required: true,
      type: String
    }
    
    }

  }


</script>

<style lang="less" scoped>
.name1{
  color: #0fbbe6;
  font-size: medium;
}

.name2{
  color: #c7236f;
  font-size:smaller;
}

.like1{
  color: #c7236f;
}
</style>